<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BootStrap+AngularJS分页显示 </title>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
	</head>

	<body ng-app="paginationApp" ng-controller="paginationCtrl">
		<table class="table table-bordered">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<div>
			<ul class="pagination pull-right">
				<li>
					<a href ng-click="prev()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
					<a ng-click=" selectPage(page) ">{{page}}</a>
				</li>
				<li>
					<a href ng-click="next() ">下一页</a>
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript ">
		var paginationApp = angular.module("paginationApp", []);
		paginationApp.controller("paginationCtrl", ["$scope", "$http", 
			function($scope, $http) {

			// 全局属性 
			$scope.currentPage = 1; //当前页码 
			$scope.pageSize = 4; // 每页多少条
			$scope.totalCount = 0; // 总记录数 
			$scope.totalPages = 0; // 总页数，根据总记录数和每页多少条进行计算 

			$scope.prev = function() {
				if($scope.currentPage > 1) {
					$scope.selectPage($scope.currentPage - 1);
				}
			};

			$scope.next = function() {
				if($scope.currentPage < $scope.totalPages) {
					$scope.selectPage($scope.currentPage + 1);
				}
			};
			$scope.selectPage = function(page) {
				$http({
					method: 'GET',
					url: '6_'+page+'.json',
					params: {
						page: page,
						pageSize: $scope.pageSize
					}
				}).success(function(data, status, headers, config) {
					// 显示表格数据 
					$scope.products = data.products;
					// 计算总页数
					$scope.totalCount = data.totalCount;
					$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);

					// 第1,2 页 
					if(page <= 2) {
						$scope.pageList = [];
						$scope.newPages = $scope.totalPages > 5 ? 5 : $scope.totalPages;
						for(var i = 0; i < $scope.newPages; i++) {
							$scope.pageList.push(i + 1);
						}
					}
				}).error(function(data, status, headers, config) {
					// 当响应以错误状态返回时调用
					alert("出错，请联系管理员 ");
				});

				// 控制只显示5页 
				// 不能小于1大于最大
				if(page < 1 || page > $scope.totalPages) return;

				//最多显示分页数5
				if(page > 2) {
					//因为只显示5个页数，大于2页开始分页转换
					var newpageList = [];
					for(var i = (page - 3); 
						i < ((page + 2) > $scope.totalPages ? $scope.totalPages : (page + 2)); 
						i++) {
						newpageList.push(i + 1);
					}
					$scope.pageList = newpageList;
				}
				$scope.currentPage = page;
				$scope.isActivePage(page);
			}

			$scope.isActivePage = function(page) {
				return page == $scope.currentPage;
			}

			$scope.selectPage($scope.currentPage);
		}]);
	</script>

</html>